<head>
    <link href="./css/tailwind.min.css" rel="stylesheet">
    <link href="./css/base.css" rel="stylesheet">
</head>

<body>
    <div class="app flex justify-center items-center relative">
        <div class="w-32 h-32 bg-blue-300 flex justify-center items-center">
            <span class="btn block w-8 h-8 bg-blue-800 cursor-pointer">点我</span>
        </div>
    </div>
    <div class="m-modal flex justify-center items-center  fixed hidden inset-0 w-full h-full bg-gray-600 bg-opacity-60">
        <div class="m-modal-mn flex flex-col w-96 h-80 py-2 bg-green-300 fixed inset-0 m-auto mt-0 align-middle rounded-lg">
            <div class="u-modal-top flex justify-between py-2 px-4 border-b border-gray-200">
                <span>标题</span><span>+</span>
            </div>
            <div class="u-title"></div>
            <div class="u-body flex-1 pt-2 px-2">
                道路千万条，安全第一条，行车不规范，亲人两行泪
            </div>
            <div class="u-footer"></div>
        </div>
    </div>

</body>

<script src="./js/jquery.min.js"></script>
<script src="./js/base.js"></script>
<script>
    $(() => {
        const btn = $('.btn').eq(0);
        const modal = $('.m-modal').eq(0);

        document.onkeydown = function (event) {        //在全局中绑定按下事件  
            const e = event || window.e;
            const keyCode = e.keyCode || e.which;
            if (keyCode === 27) {
                modal.removeClass('z-active')
                $('.m-modal-mn').animate({'margin-top': '0'}, 600);
                modal.fadeOut(400);
            }
        }

        btn.on('click', function () {
            modal.fadeIn(400);
            $('.m-modal-mn').animate({'margin-top': '25vh'}, 600);
            modal.addClass('z-active')
        })

    })
</script>